<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // this指向分析准则:
      // 1. 你要分析的this在哪个函数中
      // 2. 这个函数是如何调用的
      // 3. 如果遇到箭头函数,看外面的函数

      function fn() {
        console.log(this)
      }

      fn() //普通调用  this指向window
      const obj = {}
      obj.fn = fn
      obj.fn() //对象调用 this指向调用的对象

      //   上下文调用:
      fn.call([1]) // this指向[1]
      fn.apply([2]) // this指向[2]
      const newFn = fn.bind([3]) //bind函数不调用fn,而是根据fn克隆一个新函数,新函数的this固定指向[3]
      newFn() //this指向[3]
      obj.newFn = newFn
      obj.newFn()
      newFn.call([4])
      newFn.apply([5])

      new newFn() // 只有这种情况bind出来的函数this变化了,但是这种情况实际开发不可能出现

      class Person {
        constructor(name) {
          this.name = name
        }
        // say是添加到了原型上.原型上的属性或方法实例是可以访问的
        say() {
          console.log(this.name)
        }
      }

      const p = new Person('zs')
      console.log(p)

      function Person(name) {
        this.name = name
      }

      Person.prototype.say = function () {
        console.log(this.name)
      }
    </script>
  </body>
</html>
